<style>
  .content_body {
        display: flex;
        flex-direction: row;
    }

    .left_content {
        width: 20%;
        padding: 10px;
        border: 1px solid #bbc;
        min-height: 430px;
    }

    .right_content {
        width: 80%;
        flex-direction: column;
        padding: 0 10px;
    }

    .pag_block {
        margin-top: 20px;
    }
</style>
<template>
  <div class="userAudit w944">
    <alert ref="alert"></alert>
    <deleteAlert ref="deleteAlert"></deleteAlert>
    <div class="label_top">
      <p><i class="line"></i>用户审核</p>
    </div>
    <div class="content_body">
      <!-- 左边主体部分 -->
      <div class="left_content">
        <el-input placeholder="查找组织机构，部门" v-model="filterText"> </el-input>
        <el-tree :data="organization" @node-click="orgChoice" :props="defaultProps" :filter-node-method="filterNode"
          ref="tree">
        </el-tree>
      </div>
      <!-- 右边主体部分 -->
      <div class="right_content">
        <div class="label_table">
          <div class="el-tabs-report">
            <el-select placeholder="审核状态" v-model="status" @change="getTableList" class="th_2">
              <el-option label="审核状态" value=""></el-option>
              <el-option v-for="item in auditStatus" :key="item.value" :label="item.label" :value="item.value">
              </el-option>

            </el-select>
            <div class="msearch">
              <input placeholder="请输入用户账号……" v-model="search" />
              <a @click="getTableList"><img src="../../assets/qudaoImg/search.png" /></a>
            </div>
          </div>
        </div>

        <el-table ref="multipleTable" border :data="tableData" @selection-change="handleSelectionChange" style="width: 100%">
          <el-table-column type="selection"></el-table-column>
          <el-table-column prop="phone" label="账号" width=""></el-table-column>
          <el-table-column prop="nickname" label="用户名" width=""></el-table-column>
          <el-table-column prop="jobNum" label="工号" width=""></el-table-column>
          <el-table-column prop="organizationName" label="组织部分" width="220"></el-table-column>
          <el-table-column prop="stationName" label="岗位" width=""></el-table-column>
          <el-table-column prop="createTime" label="注册时间" width="180"></el-table-column>
          <el-table-column prop="status" label="审核状态" width="180">
            <template slot-scope="scope">
              <span class="status" v-if="scope.row.status==3">审核中</span>
              <span class="status" v-if="scope.row.status==4">审核拒绝</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button @click="passAudit(scope.row)" v-if="">通过</el-button>
              <el-button @click="refuseAudit(scope.row)" v-if="scope.row.status==3" class="red">拒绝
              </el-button>
              <el-button @click="handleDelete(scope.row)" v-if="scope.row.status==4" class="red">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="fenyeMargin">
          <el-button @click="toggleSelection(tableData)" class="allSelect">全选</el-button>
          <el-button @click="handleDeleteAll()" class="allDelete" v-if="">批量删除</el-button>
          <div class="pag_block">
            <el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize"
              layout="prev, pager, next" :total="total"></el-pagination>
          </div>
        </div>
      </div>

    </div>
  </div>

</template>
<script>
  import alert from '../../components/Alert.vue';
  import deleteAlert from '../../components/deleteAlert.vue';
  export default {
    data() {
      return {
        value: '',
        searchAddress: '',
        search: '',
        filterText: '',
        organization: [],
        defaultProps: {
          label: 'name',
          children: 'childrenList',
        },
        auditStatus: [{
          value: '3',
          label: '待审核'
        }, {
          value: '4',
          label: '已拒绝'
        }],
        tableData: [],
        multipleSelection: [],
        pagesize: 15,
        currentpage: 1,
        total: 1,
        status: '',
        passOrRefuseStatus: '',
        userId: '',
        organizationId: '',
      }
    },
    methods: {
      getTableList: function() {
        this.$ajax({
          url: this.$root.jifuUrl + "/getExamineUserPage?" + 'page=' + this.currentpage + '&num=' + this.pagesize +
            '&rootcompanyid=1&status=' + this.status + '&name=' + this.search + '&organizationid=' + this.organizationId,
          success: res => {
            if (res.data.code == 200) {
              this.tableData = res.data.data.list;
              console.log('---用户审核-getTableList-', this.tableData)
            }
          }
        });
      },
      orgChoice(val) {
        this.organizationId = val.id;
        this.getTableList()
      },
      getOrganizationInfo() {
        this.$ajax({
          url: this.$root.jifuUrl + "/getOrganizationInfo?" + 'page=' + this.currentpage + '&num=' + this.pagesize +
            '' + '&cityid=' + '' + '&regionid=' + '' + '&rootcompanyid=' + 1,
          method: 'GET',
          data: {},
          success: res => {
            if (res.data.code == 200) {
              this.organization = res.data.data;
            }
          }
        });
      },

      deleteSubmit() {
        var s = {
          id: this.transitionRow.id
        };
        this.$ajax({
          url: this.$root.jifuUrl + "/deleteUser",
          method: 'POST',
          data: this.qs.stringify(s),
          success: res => {
            if (res.data.code == 200) {
              this.$rootFunction().deleteResSuccess();
            } else {
              this.failText = res.data.message;
              this.$rootFunction().deleteResFail();
            }
          }
        });
      },

      passAudit(row) {
        this.passOrRefuseStatus = '1';
        this.userId = row.id;
        this.passOrRefuse();
      },
      refuseAudit(row) {
        this.passOrRefuseStatus = '4';
        this.userId = row.id;
        this.passOrRefuse();
      },

      passOrRefuse() { //审核用户 通过或拒绝
        var s = {
          id: this.userId,
          status: this.passOrRefuseStatus,
        };

        this.$ajax({
          url: this.$root.jifuUrl + "/passOrRefuse",
          method: 'POST',
          data: this.qs.stringify(s),
          success: res => {
            if (res.data.code == 200) {
              this.$router.go(0);
            }
          }
        });
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      getPageSearch() {
        this.currentpage = 1;
        this.getTableList();
      },
      handleCurrentChange(value) {
        this.currentpage = value;
        this.getTableList();
      },
      handleSelectionChange(val) {
        this.multipleSelection = [];
        for (var i = 0; i < val.length; i++) {
          var s = {
            id: val[i].id
          }
          this.multipleSelection.push(s)
        }
      },

      toggleSelection(rows) {

        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row, !this.allSelect)
          })
          this.allSelect = !this.allSelect;
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = [];
        for (var i = 0; i < val.length; i++) {
          var s = {
            id: val[i].id
          }
          this.multipleSelection.push(s)
        }
      },

      handleDelete(row) {
        this.transitionRow = row;
        this.$rootFunction().rootDelete();
      },

      handleDeleteAll() {
        this.$rootFunction().rootDeleteAll();
      },

      deleteSubmit() {
        var s = {
          id: this.transitionRow.id
        };
        this.$ajax({
          url: this.$root.jifuUrl + "/deleteUser",
          method: 'POST',
          data: this.qs.stringify(s),
          success: res => {
            if (res.data.code == 200) {
              this.$rootFunction().deleteResSuccess();
            } else {
              this.failText = res.data.message;
              this.$rootFunction().deleteResFail();
            }
          }
        });
      },
    },

    watch: {
      filterText(val) {
        this.$refs.tree.filter(val);
      }
    },
    components: {
      alert,
      deleteAlert
    },
    mounted() {
      this.getTableList();
      this.getOrganizationInfo();
    }
  }
</script>
